<template>
  <a-modal
    :title="form && form.id ? disabled?'查看申请':'修改申请' : '新建申请'"
    centered
    :visible="visible"
    :confirmLoading="loading"
    destroyOnClose
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">
        <a-form-model-item :disabled="disabled" ref="types" label="申请类型" prop="types">
          <a-checkbox-group  :options="types_em" v-model="form.types"></a-checkbox-group>
        </a-form-model-item>
        <!-- <a-form-model-item ref="money" label="缴纳费用" prop="money">
          <a-input-number class="sort" :disabled="disabled" placeholder="请输入缴纳费用" v-model="form.money" :min="1" :max="1000000000000"/>
        </a-form-model-item> -->
        <a-form-model-item ref="reason" label="描述" prop="reason">
          <a-textarea placeholder="描述" :rows="6"  :disabled="disabled"  v-model="form.reason"/>
        </a-form-model-item>

        <a-form-model-item :disabled="disabled" ref="pass" label="通过类型" prop="pass" v-if="form.approval_status === '1'||form.approval_status === '4'">
          <a-checkbox-group  :options="types_em" v-model="form.pass"></a-checkbox-group>
        </a-form-model-item>

        <a-form-model-item ref="refuseReason" label="拒绝原因" prop="refuseReason" v-if="form.approval_status === '2'">
          <a-textarea :rows="6"  :disabled="disabled"  v-model="form.refuseReason"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <div class="modal-footer" slot="footer">
      <a-button @click="() => { $emit('cancel') }">
        取消
      </a-button>
      <template v-if="(!form.order_status || form.order_status === '1' || form.order_status === '3') && !disabled">
        <a-button ghost type="danger" @click="handleOk('1')">
          暂存
        </a-button>
        <a-button type="primary" @click="handleOk('2')">
          提交
        </a-button>
      </template>
    </div>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19}
      }
    }
    return {
      treeData: [],
      types_em:[

        {label:'养老保险',value:'1'},
        {label:'失业保险',value:'2'},
        {label:'医疗保险',value:'3'},
        {label:'工伤保险',value:'4'},
        {label:'生育保险',value:'5'},
      ],
      form: {
        id: undefined,
        // money: 1,
        reason: undefined,
        refuseReason: undefined,
        types:[],
        pass:[]
      },
      disabled: false,
      rules: {
        // money: [
        //   { required: true, message: '请输入缴纳费用', trigger: 'blur' },
        // ],
        reason: [
          { required: true, message: '请输入详细说明', trigger: 'blur' },
        ],
        types:[
          { required: true, message: '至少选择一个', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
      // this.form.money = this.form.money ? parseInt(this.form.money) : 1;
      this.form.types = this.form.types?this.form.types.split(','):[];
      this.form.pass = this.form.pass?this.form.pass.split(','):[];

    })
  },
  methods: {
    handleOk(tag) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.form.order_status = tag;
          // this.form.money = this.form.money.toString();
          this.form.types = this.form.types.join(',');
          this.form.pass = '';
          this.$emit('ok', this.form)
        } else {
          return false;
        }
      });
    },
    resetFields() {
      this.$refs.ruleForm.resetFields();
      this.form = {
        id: undefined,
        // money: 1,
        reason: undefined,
        refuseReason: undefined,
        types:[],
        pass:[],
      };
    },
  }
}
</script>
